<template>
    <div class="search">
        <div class="search-wrapper">
            <el-input placeholder="请输入药名名称" v-model="searchName"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </div>
        <div class="drug-list-wrapper" v-show="show">
            <drug-list :drugs="searchDrugs" v-if="searchDrugs.length!=0" @addCount="addCount"></drug-list>
            <div v-else class="drug-empty">没有搜索到药品，嘿嘿嘿</div>
            <div class="pagination-wrapper" v-show="searchDrugs.length!=0">
                <el-pagination
                        background blue
                        :page-size="6"
                        :total="60"
                        :current-page.sync="currentPage"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import DrugList from "@/components/client/DrugList/DrugList";

    export default {
        components: {DrugList},
        props: {
            searchDrugs: {
                type: Array
            }
        },
        data() {
            return {
                searchName: '',
                currentPage: 1,
                show: false
            }
        },
        methods: {
            search() {
                this.show = true;
                this.$emit('search', this.searchName);
            },
            addCount(x, y) {
                this.$emit('addCount', x, y);
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .search {
        width 1000px
        margin auto

        .search-wrapper {
            display flex
            justify-content center
            width 50%
            margin 10px auto

            .el-input {
                padding-right 20px
            }
        }

        .drug-list-wrapper {
            box-shadow 0 0 50px darkgray
            height 800px
            .drug-empty {
                height 740px
                text-align center
                padding-top 100px
                font-size 30px
                color #007bff
            }
            .pagination-wrapper{
                display flex
                justify-content center
            }
        }
    }
</style>
